<template>
  <!--  守卫综合指数母指配置-->
  <div style="width: 100%; padding: 0 20px">
    <div class="operate">
      <div>
<!--        <a-select-->
<!--            style="width: 9vw;"-->
<!--            v-model="orgId"-->
<!--        >-->
<!--          <a-select-option-->
<!--              v-for="(item, index) in this.orgList"-->
<!--              :value="item.dictKey"-->
<!--              :key="index"-->
<!--          >{{ item.dictValue }}</a-select-option-->
<!--          >-->
<!--        </a-select>-->
      </div>
      <div>
        <ep-button
            icon="edit.svg"
            size="small"
            type="primary"
            @click="save"
        >保存
        </ep-button>
      </div>
    </div>
    <div style="text-align: center;
    line-height: 25px;
    height: 25px;
    font-size: 25px;
    font-weight: bold;">开发潜力综合指数</div>
    <ul class="media-wrap" v-if="orgId==='330300000000'">
      <li>
        <div class="item special">
          <div class="desc">关联指标</div>
        </div>
        <div class="item">
          <div class="desc">稀缺性</div>
        </div>
        <div class="item">
          <div class="desc">文化故事性</div>
        </div>
        <div class="item">
          <div class="desc">知名度</div>
        </div>
        <div class="item">
          <div class="desc">可开发性</div>
        </div>
        <div class="item">
          <div class="desc">地理环境</div>
        </div>
        <div class="item">
          <div class="desc">合计</div>
        </div>
      </li>
      <li v-for="(item, index) in datasForParent" :key="index">
        <div class="item special">
          <div class="desc">{{ item.k01Guard01 }}</div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.k01Guard02" @change="changeValue(index,'k01Guard02',$event)">
          <div class="suffix">
            %
          </div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.k01Guard03" @change="changeValue(index,'k01Guard03',$event)">
          <div class="suffix">
            %
          </div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.k01Guard04" @change="changeValue(index,'k01Guard04',$event)">
          <div class="suffix">
            %
          </div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.k01Guard05" @change="changeValue(index,'k01Guard05',$event)">
          <div class="suffix">
            %
          </div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.k01Guard06" @change="changeValue(index,'k01Guard06',$event)" disabled>
          <div class="suffix">
            %
          </div>
        </div>
        <div class="item">
          <input class="div-input" type="text" placeholder="请输入内容"
                 t_value="" o_value=""
                 onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
                 onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
                 :value="item.k01Guard07" @change="changeValue(index,'k01Guard07',$event)" disabled>
          <div class="suffix">
            %
          </div>
        </div>
      </li>
    </ul>

  </div>
</template>
<script>
import {getOrgList, getDevPotForK01,devPotForUpdateK01} from "@/services/system/whdngxlApi"
import moment from 'moment'

export default {
  name: 'devPotentialForK01Form',
  components: {},
  data() {
    return {
      datasForParent: [{
        k01Guard01: '',
        k01Guard02: '',
        k01Guard03: '',
        k01Guard04: '',
        k01Guard05: '',
        k01Guard06: '',
        k01Guard07: '',
      }],
      orgList: [{
        dictKey: '330300000000',
        dictValue: '温州市'
      },{
        dictKey: '2',
        dictValue: '鹿城区'
      }],
      orgId: '330300000000'
    }
  },
  created() {
    // this.$http.post(getOrgList, {}).then((res) => {
    //     this.orgList = res.result
    // })
    this.getInfoForForm()
  },
  mounted() {

  },
  methods: {
    initData(orgId){
      if(this.orgId === orgId){
        this.getInfoForForm()
      }
      this.orgId = orgId

    },
    save() {
      const data1 = this.datasForParent[0]
      if(Number(data1.k01Guard07) !== 100) {
        this.$message.error("合计值必须达到100%");
        return
      }
      const params = {}
      params.orgId= this.orgId
      params.k0102 = data1.k01Guard02 / 100
      params.k0103 = data1.k01Guard03 / 100
      params.k0104 = data1.k01Guard04 / 100
      params.k0105 = data1.k01Guard05 / 100
      params.k0106 = data1.k01Guard06 / 100
      this.$http.post(devPotForUpdateK01, params).then((res) => {
        this.$message.success("配置成功");
        this.getInfoForForm()
      })
    },
    changeValue(index,field,e){
      console.log(e.target._value)
      console.log(e.target.value)
      let sum = 0
      for (let datumKey in this.datasForParent[0]) {
        if(datumKey === 'k01Guard01' || datumKey === 'k01Guard07' || datumKey === field || datumKey === 'k01Guard06'){
          continue
        }
        sum = sum + Number(this.datasForParent[0][datumKey])
      }
      if(index === 0){
        sum = sum + Number(e.target.value)
        if(sum  > 100){
          this.datasForParent[0][field] = e.target._value
          this.$set(this.datasForParent,0, this.datasForParent[0])
          return
        }

        this.datasForParent[0][field] = e.target.value
        this.datasForParent[0].k01Guard06 = 100 - sum
      }

    },
    getInfoForForm() {
      this.$http.post(getDevPotForK01, {}).then((res) => {
        this.datasForParent = []
        this.datasForParent.push({
          k01Guard01: res.result.k01Guard01,
          k01Guard02: res.result.k01Guard02,
          k01Guard03: res.result.k01Guard03,
          k01Guard04: res.result.k01Guard04,
          k01Guard05: res.result.k01Guard05,
          k01Guard06: res.result.k01Guard06,
          k01Guard07: res.result.k01Guard07,
        })
      })
    }
  },
  watch: {
    orgId(){
      this.getInfoForForm()
    }
  }
}
</script>
<style lang="less" scoped>
.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;

  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }


}
.media-wrap {
  margin-top: 15px;

  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;

    .item {
      flex: 0 0 auto;
      width: 15%;

      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .div-input {
        width: 80%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: visible;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
      }

      /* 输入框为空时显示 placeholder */
      .div-input:empty:before {
        content: attr(placeholder);
        color: red;
      }
      /* 输入框获取焦点时移除 placeholder */
      .div-input:focus:before {
        content: none;
      }

      .suffix {
        display: inline-block;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.special {
          display: inline-block;
          width: 80%;
          overflow: visible;
        }
      }

      .btn-wrap {
        text-align: center;
      }


      &.special {
        width: 10%;
      }
    }
  }
}
</style>